<template>
  <div class="my-box">
    <div class="my-top">
      <div class="left-tit">
        <div>{{ info.contactName }}</div>
      </div>
      <div class="right-tit rightTit">
        <div class="tit-con-left">
          <uni-icons type="phone-filled" color="#739eca" size="18" />
          <div>
            {{ info.phone }}
          </div>
        </div>
        <div>
          <uni-icons type="compose" color="#739eca" size="18" @click="editCustomer(info.id)" />
          <uni-icons type="trash" color="red" size="18" @click="deleteCustomer([info.id])" />
        </div>
      </div>
    </div>
    <div class="same-tit">
      <div class="tit">
        <div>所属单位</div>
      </div>
      <div class="company">
        <uni-tooltip :content="info.company" placement="bottom">
          <view class="item">
            {{ info.company }}
          </view>
        </uni-tooltip>
      </div>
    </div>
    <div class="same-tit">
      <div class="left-tit">
        <div>场站名称</div>
      </div>
      <div class="right-tit">
        <div>
          {{ info.stationName }}
        </div>
      </div>
    </div>
    <div class="same-tit">
      <div class="left-tit">
        <div>邮箱</div>
      </div>
      <div class="right-tit">
        <div>
          {{ info.mailbox }}
        </div>
      </div>
    </div>
    <div class="same-tit">
      <div class="left-tit">
        <div>状态</div>
      </div>
      <div class="right-tit">
        <view v-for="item in costomerStatus" :key="item.value">
          <uni-tag
            v-if="info.status === item.value" size="mini" :inverted="true"
            custom-style="background-color: #739eca; border-color: #739eca; color: #fff;" :text="item.text" type="primary"
          />
        </view>
      </div>
    </div>
    <div class="same-tit">
      <div class="left-tit">
        <div>备注</div>
      </div>
      <div class="right-tit">
        <div>
          {{ info.remark?info.remark:"暂无" }}
        </div>
      </div>
    </div>
    <customer-form ref="customer" :status-list="costomerStatus" @getList="getList" />
    <uni-popup ref="deleteDialog" type="dialog">
      <uni-popup-dialog type="info" cancel-text="取消" confirm-text="确定" title="系统提示" content="从操作将永久删除" @confirm="dialogConfirm" />
    </uni-popup>
  </div>
</template>

<script>
import CustomerForm from './customer-form.vue'
import { deleteCustomers } from '@/apis/customer'
export default {
  name: 'CustomerItem',
  components: { CustomerForm },
  props: {
    info: {
      type: Object,
      required: true,
    },
    costomerStatus: {
      type: Array,
      required: true,
    },
    showSearch: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      params: [],
    }
  },
  methods: {
    getList() {
      this.$emit('getList')
    },
    // 删除
    deleteCustomer(param) {
      this.params = param
      this.$refs.deleteDialog.open()
      if (this.showSearch) {
        this.$emit('cleanSearch')
      }
    },
    async dialogConfirm() {
      try {
        const res = await deleteCustomers(this.params)
        if (res) {
          uni.showToast({
            title: '删除成功',
            duration: 2000,
          })
          this.$emit('getList')
        }
      } catch (err) {
        uni.showToast({
          title: '删除失败',
          duration: 2000,
        })
      }
    },
    // 编辑
    editCustomer(id) {
      this.$refs.customer.open(id)
      if (this.showSearch) {
        this.$emit('cleanSearch')
      }
    },
    async handleClick() {
      const { processInstance } = this.info
      // 获取 cpnName
      const { componentName, name } = this.$store.getters.menuLeafMap[processInstance.processDefinitionId]

      uni.navigateTo({
        url: `/package-oa/pages/process/detail?id=${processInstance.id}&cpnName=${componentName}&processName=${name}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.my-box {
	width: 92%;
	margin: 0 auto;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
	border-radius: 4px;
	margin-top: 10px;
	padding-top: 15px;
	padding-bottom: 5px;
	.left-tit{
		display:flex;
		justify-content: flex-end;
		padding-right: 8px;
		width: 30%;
		div{
			padding-left:2px;
		}
	}
	.rightTit{
		justify-content: space-between;
	}
	.right-tit{
		width: 70%;
		display:flex;
		padding-left: 8px;
		.tit-con-left{
			display:flex;
		}
		div{
			padding-left:2px;
		}
	}
	.my-top {
		display: flex;
		margin: 0 auto;
		width: 93%;
		padding-bottom: 5px;
		color: #333;
		font-size: 14px;
		font-weight: 600;
	}
	.same-tit{
		display: flex;
		margin: 0 auto;
		width: 93%;
		padding-bottom: 5px;
		color: #333;
		.tit{
			display:flex;
			justify-content: flex-end;
			width: 30%;
			div{
				padding-right: 4px;
				padding-left:2px;
			}
		}
		.company{
			width: 70%;
			display:flex;
			div{
				padding-left:2px;
			}
			.item{
				padding-left: 11px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 89%;
			}
		}
		div{
			font-size: 13px;
		}
	}
}
</style>
